<template lang="html">
  <div class="home">
      <!-- 上部卡片 -->
      <div class="indexTop">
          <Row type="flex" justify="space-between" style="background:#f8f8f9; padding: 10px">
              <Col span="4">
              <Card shadow>
              <div style="text-align:center">
                  <img src="../../assets/img/home/添加一级账号.png">
                  <h2>添加一级账号</h2>
              </div>
              </Card>
              </Col>
              <Col span="4">
              <Card shadow>
              <div style="text-align:center">
                  <img src="../../assets/img/home/添加系统管理员.png">
                  <h2>添加系统管理员</h2>
              </div>
              </Card>
              </Col>
              <Col span="4">
              <Card shadow>
              <div style="text-align:center">
                  <img src="../../assets/img/home/一级机构账号.png">
                  <h2>001个</h2>
                  <h4>一级机构账号</h4>
              </div>
              </Card>
              </Col>
              <Col span="4">
              <Card shadow>
              <div style="text-align:center">
                  <img src="../../assets/img/home/二级个人账号.png">
                  <h2>008个</h2>
                  <h4>二级个人账号</h4>
              </div>
              </Card>
              </Col>
              <Col span="4">
              <Card shadow>
              <div style="text-align:center">
                  <img src="../../assets/img/home/项目数量.png">
                  <h2>0018个</h2>
                  <h4>项目数量</h4>
              </div>
              </Card>
              </Col>
          </Row>
      </div>
      <!-- 中部操作记录 -->
      <div class="indexHandle">
          <div style="background:#f8f8f9;padding:10px">
              <Card :bordered="false">
              <p slot="title">
                  <Row>
                      <Col span="2">
                          操作记录
                      </Col>
                      <Col span="1" style="color:#999999">
                          更多>>
                      </Col>
                  </Row>
              </p>
              <Table height='250' @on-row-click='rowClick' :show-header="showHeader" highlight-row :columns="columns1" :data="data1"></Table>
              </Card>
          </div>
      </div>
      <!-- 下部分类 -->
      <div class="indexClassify">
          <Row :gutter="8" style="background:#f8f8f9 ;padding:10px">
              <Col span="12">
                  <Card :bordered="false">
                      <p slot="title">二级个人账号创建记录</p>
                      <p>
                          <Row>
                              <Col span="24">
                                  <!-- 二级账号记录 -->
                                  <Table height='378' :columns="columns2" :data="data2"></Table>
                                  <Row type="flex" justify="end" style="padding:10px 0">
                                      <Col span="17">
                                          <Page style="float:right" :total="100" show-total/>
                                      </Col>
                                  </Row>
                              </Col>
                          </Row>
                      </p>
                  </Card>
              </Col>
              <Col span="12">
                  <Card shadow>
                      <p slot="title">项目记录</p>
                      <p>
                          <!-- 项目记录 -->
                          <Table height='378' :columns="columns2" :data="data2"></Table>
                          <Row type="flex" justify="end" style="padding:10px 0">
                              <Col>
                                    <Page :total="14" show-total/>
                              </Col>
                          </Row>
                      </p>

                  </Card>
              </Col>
          </Row>
      </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showHeader: false,
      columns1: [
        {
          title: "人员",
          key: "name"
        },
        {
          title: "Ip",
          key: "ip"
        },
        {
          title: "操作",
          key: "operation"
        },
        {
          title: "时间",
          key: "time"
        }
      ],
      data1: [
        {
          name: "系统管理员 张三",
          ip: "ip:xxxxxx",
          operation: "登陆系统",
          time: "2016-10-03 ：24：00"
        },
        {
          name: "系统管理员 张三",
          ip: "ip:xxxxxx",
          operation: "登陆系统",
          time: "2016-10-03 ：24：00"
        },
        {
          name: "系统管理员 张三",
          ip: "ip:xxxxxx",
          operation: "登陆系统",
          time: "2016-10-03 ：24：00"
        },
        {
          name: "系统管理员 张三",
          ip: "ip:xxxxxx",
          operation: "登陆系统",
          time: "2016-10-03 ：24：00"
        },
        {
          name: "系统管理员 张三",
          ip: "ip:xxxxxx",
          operation: "登陆系统",
          time: "2016-10-03 ：24：00"
        }
      ],
      columns2: [
        {
          title: "序号",
          key: "num"
        },
        {
          title: "所属一级账号",
          key: "affiliation"
        },
        {
          title: "创建的二级账号",
          key: "secondLevel"
        },
        {
          title: "创建日期",
          key: "data"
        }
      ],
      data2: [
        {
          num: "1",
          affiliation: "",
          secondLevel: "王五 | 部门经理",
          data: "2016-10-03"
        },
        {
          num: "2",
          affiliation: "",
          secondLevel: "王五 | 部门经理",
          data: "2016-10-03"
        },
        {
          num: "3",
          affiliation: "",
          secondLevel: "王五 | 部门经理",
          data: "2016-10-03"
        },
        {
          num: "4",
          affiliation: "",
          secondLevel: "王五 | 部门经理",
          data: "2016-10-03"
        },
        {
          num: "5",
          affiliation: "",
          secondLevel: "王五 | 部门经理",
          data: "2016-10-03"
        },
        {
          num: "6",
          affiliation: "",
          secondLevel: "王五 | 部门经理",
          data: "2016-10-03"
        },
        {
          num: "7",
          affiliation: "",
          secondLevel: "王五 | 部门经理",
          data: "2016-10-03"
        },
        {
          num: "8",
          affiliation: "",
          secondLevel: "王五 | 部门经理",
          data: "2016-10-03"
        },
        {
          num: "9",
          affiliation: "",
          secondLevel: "王五 | 部门经理",
          data: "2016-10-03"
        },
        {
          num: "10",
          affiliation: "",
          secondLevel: "王五 | 部门经理",
          data: "2016-10-03"
        }
      ],
      columns1: [
        {
          title: "人员",
          key: "name"
        },
        {
          title: "Ip",
          key: "ip"
        },
        {
          title: "操作",
          key: "operation"
        },
        {
          title: "时间",
          key: "time"
        }
      ],
      data1: [
        {
          name: "系统管理员 张三",
          ip: "ip:xxxxxx",
          operation: "登陆系统",
          time: "2016-10-03 ：24：00"
        },
        {
          name: "系统管理员 张三",
          ip: "ip:xxxxxx",
          operation: "登陆系统",
          time: "2016-10-03 ：24：00"
        },
        {
          name: "系统管理员 张三",
          ip: "ip:xxxxxx",
          operation: "登陆系统",
          time: "2016-10-03 ：24：00"
        },
        {
          name: "系统管理员 张三",
          ip: "ip:xxxxxx",
          operation: "登陆系统",
          time: "2016-10-03 ：24：00"
        },
        {
          name: "系统管理员 张三",
          ip: "ip:xxxxxx",
          operation: "登陆系统",
          time: "2016-10-03 ：24：00"
        }
      ]
    };
  },
  mounted() {
  },
  methods: {
    rowClick() {
      this.$router.push("/admin/main/IndexOperation");
    },
    handleTabRemove(name) {
      this["tab" + name] = false;
    }
  },
}
</script>

<style scoped lang="less">
.indexTop {

  .ivu-card {
    height: 150px;
    div {
      img {
        width: 50px;
        height: 50px;
      }
    }
  }
}
</style>
